<template>
  <div id="page-dialogs">
    <v-container grid-list-xl fluid>
      <v-layout row wrap>
        <v-flex lg4>
            <div slot="widget-content">
              <v-dialog v-model="dialogLookMore" persistent max-width="800px" >
                <v-card>
                  <v-card-title>
                    <v-flex xs10>
                      <span class="headline">会员卡类型</span>
                    </v-flex>
                    <v-flex>
                      <v-btn color="blue darken-1"  flat @click="close">关闭</v-btn>
                    </v-flex>
                  </v-card-title>
                  <v-divider></v-divider>
                  <v-card-text>
                    <v-container grid-list-md>
                      <v-layout wrap>
                        <v-flex xs5 sm5 lg5 class="pr-3 pt-2" v-for="(Item,index) in cardType" :key="index" v-if="index>=count">
                            <v-img
                              class="white--text"
                              height="170px"
                              :src="Item.image"
                              @click="addCard(Item)"
                            >
                              <v-container fill-height fluid>
                                <v-layout fill-height>
                                  <v-flex xs12 align-end flexbox>
                                    <v-badge right color="green">
                                      <span slot="badge" >{{Item.memberAmount}}</span>
                                      <span class="headline">{{Item.name}}</span>
                                      </v-badge>
                                  </v-flex>
                                </v-layout>
                              </v-container>
                            </v-img>
                        </v-flex>
                      </v-layout>
                    </v-container>
                    <small>*indicates required field</small>
                  </v-card-text>
                  <v-card-actions>
                    <v-spacer></v-spacer>
                  </v-card-actions>
                </v-card>
              </v-dialog>
            </div>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
import Pubsub from "pubsub-js";
export default {
  props: ["cardType", "count", "dialogLookMore"],
  components: {},
  computed: {},
  methods: {
    close() {
      //发布消息
      Pubsub.publish("close");
    },
    addCard(Item){
      Pubsub.publish("addCard",Item);
    }
  }
};
</script>